<template>
  <div class="content">
    <dc-header :title="'消息提醒设置'" :icon="'icon-header-back'"></dc-header>
    <div class="head-top">
      <div class="mt20" v-for="config in configs">
        <mt-cell>
          <span slot="icon" class="aln-center">
            <i class="iconfont ft28" :class="config.configItemIcon"></i>
            <span class="ml15">{{config.configItemName}}</span>
          </span>
          <span><mt-switch v-model="config.enable"
                           @change="editStatus(config.configItemCode, config)"></mt-switch></span>
        </mt-cell>

        <mt-cell class="gray-set" v-for="subConfig in config.subConfigItem" :key="subConfig.configItemCode"
                 :title="subConfig.configItemName">
          <span><dc-checkbox @boxChecked="editStatus(subConfig.configItemCode, subConfig)"
                             :status="subConfig.enableFalg"></dc-checkbox></span>
        </mt-cell>
      </div>
    </div>
  </div>
</template>
<script>
  import header from '@/components/header';
  import cell from '@/components/cell';
  import api from '@/common/api/inform';
  import mintUi from '@/common/mintUi';
  import checkbox from '@/components/checkbox';
  export default {
    components: {
      'dc-header': header,
      'dc-cell': cell,
      'dc-checkbox': checkbox
    },
    data () {
      return {
        configs: []
      };
    },
    activated () {
      api.informConfig().then(res => {
        this.configs = res;
        res.forEach(config => {
          config.enable = false;
          if (config.enableFalg === '1') {
            config.enable = true;
          }
        });
      });
    },
    methods: {
      editStatus (code, item) {
        if (item.enableFalg === '1') {
          item.enableFalg = '0';
        } else {
          item.enableFalg = '1';
        }
        api.editConfig(code, item.enableFalg).then(res => {
          mintUi.openToast('修改成功!');
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/css/variable";

  .aln-center {
    display: flex;
    align-items: center;
  }

  .gray-set {
    background: #FAFAFA;
  }

  .blue {
    color: #60c3d2;
  }

  .ft28 {
    font-size: px2rem(48px);
  }

  .yello {
    color: #F3D906;
  }

  .bold {
    font-weight: bold;
  }
</style>
